<template>
	<view class="oneItem" >
		<template>
				<image v-if="item.coverpic" :src="item.coverpic" class="one">	</image>
					<image class="one" v-else src="/static/images/暂无.png" mode=""></image>
		</template>

			<template v-if="videoDuration.min">
						<text class="duration">{{videoDuration.min}}:{{videoDuration.sec}}</text>
			</template>
	
	

			<!-- 通过视频地址获取到视频时长 -->
		<video style="display: none;"  v-if="item.vid" :src="item.vid" @loadedmetadata="giao" controls="false">
		</video>
		
		<view class="product-name">{{item.name}}</view>
		<view class="footers">
			<view>
				 <text>{{item.pageview}}万</text>
				 <image src="../../static/images/浏览.png"></image>
			</view>	
			<view>
				 <text>{{item.collections}}万</text>
				 <image src="../../static/images/shoucamg.png" @tap.stop="collection(item._id)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["item"],
		name:"foodone",
		data() {
			return {
				videoDuration:{
					min:"",
					sec:""
				}
			};
		},
		onLoad() {
			
		},
		methods:{
			
			giao(video){
				const time=video.detail.duration
				 const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
				  const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
				this.videoDuration.min=min
				this.videoDuration.sec=sec
			},
			async collection(id){
				const token=wx.getStorageSync("user_token")
				const datas=getApp().globalData.userInfo
				
						if(token){
							const data=await this.$api.user.setCollection({user_id:datas._id,menu_id:id},{token:token})
							console.log(data.msg);
							uni.showToast({
							    title: data.msg,
							    duration: 1000
							});
						}else{
							uni.showToast({
							    title: "请先登录账号",
							    duration: 1000,
								icon:"error"
							});
							
						}
						
				
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
.one{
		width: 320rpx;
		height: 300rpx;
		border-radius: 20rpx;
		position: relative;
	
	}
.product-name{
			font-size: 32rpx;
			margin:5rpx auto 5rpx;
		}
		>view{
			margin-top: 10rpx;
	
		}
		>image{
			width: 100%;
			height: 250rpx;
		}
		.footers{
			width: 100%;
			display: flex;
		
	
			>view{
				width: 50%;
				display: flex;
					align-items: center;
					font-size: 25rpx;
				
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			
}
.oneItem{
	position: relative;
}
.duration{
			position: absolute;
			left: 200rpx;
			top: 235rpx;
			display: block;
			width: 100rpx;
			background-color: #838488;
			color: white;
			font-size: 26rpx;
			border-radius: 30rpx;
			text-align: center;
		}
</style>
